<template>
  <div>
    <el-table
      :data="charges"
      size="small"
      :show-header="false"
      empty-text="未选择费用类别"
      style="width: 400px;"
    >
      <el-table-column prop="name" width="349" show-overflow-tooltip />
      <el-table-column align="right" width="50" v-slot="{row}">
        <el-button type="danger" plain circle icon="el-icon-delete" size="mini"
          @click="onChargeTypeDeleteClick(row)" />
      </el-table-column>
    </el-table>
    <el-button :disabled="params.disabled" type="primary" plain size="mini"
      @click="onChargeTypeSelectClick">选择</el-button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  props: ['params'],
  data() {
    return {
      charges: []
    }
  },
  methods: {
    async onChargeTypeSelectClick() {
      if (!this.chargeTypeSelector) {
        this.chargeTypeSelector = new Vue({
          ...((await import('@/pages/resthome/chargeType/ChargeTypeSelector')).default)
        }).$mount();
        document.body.appendChild(this.chargeTypeSelector.$el);
      }
      this.chargeTypeSelector.show({
        resthomeId: this.params.resthomeId,
        selections: this.charges.map(c => c.id),
        onOk: (selections) => {
          this.charges = selections;
        }
      });
    },
    onChargeTypeDeleteClick(row) {
      this.charges = this.charges.filter(c => c.id != row.id);
    },
    getValues() {
      return this.charges;
    }
  }
}
</script>